<template>
	<view :style="$theme.pageStyle">


		<z-nav-bar ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed" title="订单详情">
		    <view class="preview" slot="center">订单详情</view> 
		</z-nav-bar>	
		
	
		<view class="content" :style="{ paddingTop: TopHeight + 'px' }">
			<view class="title" v-if="Order.lawyer_id != 0">
				{{ Order.lawyer ? Order.lawyer.real_name : '加载中...' }}律师的 <span v-if="Order.type == 1">图文咨询</span>
				<span v-if="Order.type == 2">电话咨询</span>
			</view>
			<view class="title" v-else>
				等待律师接单
			</view>
			
			<view class="pay_info" v-if="Order.countdown > 0 && Order.pay_status === 0">
				<view class="" style="display: flex;align-items: center;">
					<span style="margin-right: 5px;">请在</span>
					<uni-countdown :show-day="false" :second="Order.countdown" />
					<span style="margin-left: 5px;">内支付</span>
				</view>
			</view>

			<view class="is_pay" v-if="Order.status == 9">
				已取消
			</view>

			<view class="is_pay" v-if="Order.status == 2">
				已完成
			</view>

			<view class="small_box">
				<view class="small_tit">
					订单信息
				</view>
				<view class="topbox">
					<view class="tg_content_item flex jsbt w100">
						<view class="tg_content_img">
							<image v-if="Order.lawyer_id != 0 &&Order.lawyer && Order.lawyer.avatar"
								:src="Order.lawyer.avatar" mode="aspectFill"></image>
							<image v-else
								src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/511710885111bkUHfy.png"
								mode="aspectFill"></image>
						</view>
						<view class="tg_content_text">
							订单金额：<span class="rmb">¥</span>
							<span class="rmb_info">{{ Order.order_amount }}</span>
						</view>
					</view>
				</view>
			</view>

			<cl-cell title="订单号" :value="Order.sn" name="user" :isLink="false"></cl-cell>
			<cl-cell title="订单类型" v-if="Order.type == 1" value="图文咨询" name="user" :isLink="false"></cl-cell>
			<cl-cell title="订单类型" v-if="Order.type == 2" value="电话咨询" name="user" :isLink="false"></cl-cell>
			<cl-cell title="下单时间" :value="Order.add_time" name="user" :isLink="false"></cl-cell>

			<view v-if="Order.pay_status == 1">
				<cl-cell title="支付方式" value="余额支付" name="user" :isLink="false"></cl-cell>
				<cl-cell title="支付时间" :value="Order.pay_time" name="user" :isLink="false"></cl-cell>
			</view>

			<cl-cell title="预约时间" v-if="Order.type == 2" :value="Order.book_time" name="user" :isLink="false"></cl-cell>

			<view class="" style="margin-top: 20px;"
				v-if="Order.pay_status = 1 && Order.status === 1 && Order.type === 1 && Order.lawyer_id != 0">
				<u-button style="height: 50px;" type="primary" shape="circle" text="立即咨询" @click="ToChat()"></u-button>
			</view>


			<view class="" v-if="Order.lawyer_id != 0">
				<view class="" style="margin-top: 20px;"
					v-if="Order.pay_status = 1 && Order.status === 1 && Order.type === 2">
					<u-button style="height: 50px;" type="primary" shape="circle" text="拨打电话"
						@click="ToChat()"></u-button>
				</view>

				<view class="" style="margin-top: 20px;" v-if="Order.status === 3 && Order.is_evaluate === 0">
					<u-button style="height: 50px;" type="primary" shape="circle" text="订单评价"
						@click="ToEvaluate()"></u-button>
				</view>
				
			</view>


		</view>
	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	import {
		storeToRefs
	} from 'pinia';
	import {
		useMsgStore
	} from '@/store/message';
	import {
		useloginStore
	} from '@/store/login';
	import pinia from '@/store/index'
	const msgStore = useMsgStore(pinia)
	const loginStore = useloginStore(pinia)
	const {
		unread,
		sysUnread
	} = storeToRefs(msgStore);

	export default {
		data() {
			return {
				id: '',
				Order: {},
				timeData: {},
				scrollTop: 0,
				TopHeight: uni.getStorageSync('TopHeight'),
			};
		},
		onLoad(opt) {
			this.id = opt.id;
		},
		onShow() {
			this.getData();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		mounted() {
			// 检查本地联系人,如果没有才去请求接口
			let contacts = uni.getStorageSync('allContacts');
			if (!contacts.length) {
				this.initContacts();
			}
			// 监听ws状态,如果重新连接了,要更新联系人
			uni.$on('socketStatus', (e) => {
				if (e) {
					this.initContacts();
				}
			})
		},
		methods: {
			initContacts() {
				console.log('initContacts -- ')
				this.modelName = '';
				this.$api.msgApi.initContacts().then(res => {
					if (res.code == 0) {
						// 设置消息未读数和系统消息未读数
						msgStore.sysUnread = res.count;
						msgStore.initContacts(res.data);
					}
				})
			},
			async getData() {
				try {
					const res = await $H.post('order/consultdetail', {
						id: this.id
					}, {
						token: true
					});
					this.Order = res.data;

				} catch (error) {
					// 处理错误
				}
			},
			onChange(e) {
				this.timeData = e;
			},

			ToChat() {
				uni.navigateTo({
					url: `/im/message/chat?id=${this.Order.lawyer.id}` + '&order_id=' + this.id,
				});
			},
			ToEvaluate() {
				uni.setStorageSync('evaluate', this.Order.lawyer)
				uni.navigateTo({
					url: `/order/consult/evaluate?id=${this.Order.lawyer.id}` + '&order_id=' + this.id,
				})
			}
			// countdownfinish() {
			// 	uni.navigateBack();
			// },
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		background: linear-gradient(var(--color-primary), var(--color-primary-light-3) 30vw, #fff 70vw);
		padding: 15px;

		.title,
		.is_pay {
			height: 50px;
			line-height: 50px;
			color: #fff;
			font-size: 26px;
			font-weight: bold;
		}

		.is_pay {
			height: 50px;
			line-height: 50px;
			color: #fff;
			font-size: 26px;
			font-weight: bold;
		}

		.pay_info {
			height: 40px;
			line-height: 40px;
			color: red;
			background: #fff;
			border-radius: 8px;
			padding: 5px;
			font-weight: bold;
			display: flex;

			span {
				margin: 0;
			}
		}

		.small_box {
			background: #fff;
			border-radius: 8px;
			margin-top: 10px;
			padding: 20px;

			.small_tit {
				font-size: 16px;
				font-weight: bold;
			}
		}

		.tg_content_item {
			padding: 10px 0px 10px 0px;
		}

		.tg_content_text {
			width: 70%;
			display: flex;
			align-items: flex-end;
			justify-content: flex-end;

			.text_box {
				font-size: 14px;
				color: #000;
			}
		}

		.tg_content_img {
			image {
				width: 80px;
				height: 80px;
				border-radius: 8px;
			}
		}

		.rmb {
			font-size: 14px;
			color: var(--color-primary);
			margin-right: 5px;
		}

		.rmb_info {
			font-size: 22px;
			color: var(--color-primary);
			margin-right: 5px;
			font-weight: bold;
		}

		.flex {
			display: flex;
		}

		.jsbt {
			justify-content: space-between;
		}

		.w100 {
			width: 100%;
		}

		.time {
			@include flex;
			align-items: center;

			&__custom {
				width: 22px;
				height: 22px;
				background-color: rgba(252, 60, 62, 0.09);
				border-radius: 4px;
				display: flex;
				justify-content: center;
				align-items: center;

				&__item {
					color: var(--color-primary);
					font-size: 12px;
					text-align: center;
				}
			}

			&__doc {
				color: var(--color-primary);
				padding: 0px 4px;
			}

			&__item {
				color: #606266;
				font-size: 15px;
				margin-right: 4px;
			}
		}
	}
</style>